import { useState } from 'react';
import { Button, Modal, Form, Input, Col } from 'antd';
import AliyunOSSUpload from '../BannerDetail/components/AliyunOSSUpload';
import styles from './index.less';
import type { CardDetail } from './components/Card';
import BannerCard from './components/Card';
import {
  getBannerList,
  createBanner,
  delBanner,

} from '@/services/ant-design-pro/api';
import _ from 'lodash';

export default function BannerList() {
  const [form] = Form.useForm();
  const [cartList, setCardList] = useState<CardDetail[]>([]);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [currentAction, setCurrentAction] = useState('create');

  // 获取卡片数据
  const querBannerList = async (params: any) => {
    const resp = await getBannerList({ params: { ...params } })
    console.log(resp)
    const list = _.get(resp, 'data.list', []);
  }

  const onFinish = async (params: any, id: number) => {

    if (currentAction === 'edit') {
      // const currentIndex = cartList.findIndex((item) => item.id === value.id);
      // cartList[currentIndex] = value;
    } else {
      // cartList.push(value);
      await createBanner({ params: { ...params } })
      cartList.push(params)  
    }
    setCardList(cartList);
    setIsModalVisible(false);
    form.resetFields();
  };

  const handleCreate = () => {
    setCurrentAction('create');
    setIsModalVisible(true);
  };

  const closeModal = () => {
    setIsModalVisible(false);
    form.resetFields();
  };

  const handleDelete = async (id: number) => {
    await delBanner({ id })
    // await querBannerList()
  };

  const handleEdit = (item: CardDetail) => {
    setIsModalVisible(true);

    form.setFieldsValue(item);
    setCurrentAction('edit');
  };

  const normFile = (e: any) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  return (
    <>
      <Button onClick={handleCreate} style={{ marginBottom: 20 }}>
        点击新增卡片
      </Button>
      <Modal visible={isModalVisible} footer={null} onCancel={closeModal}>
        <Form form={form} name="control-ref" onFinish={onFinish}>
          <Form.Item name="comment" label="备注：" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="url" label="跳转路径：" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="lane" label="权重：" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item
            name="image"
            valuePropName="fileList"
            getValueFromEvent={normFile}
            label="图片："
            rules={[{ required: true }]}
          >
            <AliyunOSSUpload maxCount={8} bindType="estate" />
          </Form.Item>
          <Col span={24} style={{ textAlign: 'right' }}>
            <Button type="primary" htmlType="submit" id={currentAction}>
              hello
            </Button>
            <Button
              style={{ margin: '0 8px' }}
              onClick={() => {
                form.resetFields();
              }}
            >
              清空
            </Button>
          </Col>
        </Form>
      </Modal>

      <div className={styles.cardList}>
        {cartList.map((item, id) => (
          <BannerCard
            key={id}
            detail={item}
            image={item.image[0].url}
            handleDelete={() => handleDelete(id)}
            handleEdit={() => handleEdit(item)}
          />
        ))}
      </div>
    </>
  );
}
